<template>
	<view class="add-more-main">
		<view class="li-title">{{liTitle}}</view>
		<view class="">
			<view class="add-more-body">
				<view class="pers-list" v-for='(it,i) in perList' :key='i'>
					<view class="pers-pic">
						<view class="">
							<u-avatar :text="it.userName.slice(1)" :fontSize="it.userName.length > 2?12:15"
								shape="square" size="35" bgColor="#0087FC">
							</u-avatar>
							<view class="pers-close" style="" @click="closeUser(it,i)">
								<u-icon  class="per-close" name="close" color="#ffffff" size="16rpx" customStyle="line-height: 20rpx;" bold>
								</u-icon>
							</view>
						</view>
						<view class="pers-icon">
							<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
						</view>
					</view>
					<text class="pers-name">{{it.userName}}</text>
				</view>
				<view class="pers-list plus-style" @click="gotoPage('/components/choose-user/choosePer?type='+type)">
					<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
					<view class="">
						<uni-text class="span-style" v-show="isMust=='true' && perList.length==0">
							<span>*</span>
						</uni-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'',
				liTitle: '',
				perList: [],
				isMust: false,
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.perList = option.perList && JSON.parse(decodeURIComponent(option.perList))
			this.isMust = option.isMust
			if(this.isMust == 'true') {
				this.liTitle = this.perList.length + '人依次' + this.type.slice(0, this.type.length-1)
				this.noticeTitle = this.type
			} else {
				this.liTitle = this.type.slice(0, this.type.length-1) + this.perList.length + '人'
				this.noticeTitle = this.type
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.noticeTitle
			})
		},
		onUnload(){
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			if(prevPage && prevPage.$page.fullPath == '/subPackTask/work/cy/bx/list') {
				prevPage.$vm.t = 'add-more'
				prevPage.$vm.type = this.type
				prevPage.$vm.setPers(this.perList);
			}else {
				pages.forEach(e=>{
					if(e.route == 'subPackTask/work/cy/bx/list'){
						prevPage = e
					}
				})
				prevPage.$vm.t = 'add-more'
				prevPage.$vm.type = this.type
				prevPage.$vm.setPers(this.perList);
			}
		},
		methods: {
			setPers(e) {
				this.perList.forEach(item => {
					e.forEach(eIts => {
						if(item.userId == eIts.userId){
							let getLocation = e.indexOf(eIts);
							e.splice(getLocation, 1)
						}
					})
				})
				this.perList = this.perList.concat(e)
				if(this.isMust == 'true') {
					this.liTitle = this.perList.length + '人依次' + this.type.slice(0, this.type.length-1)
				} else {
					this.liTitle = this.type.slice(0, this.type.length-1) + this.perList.length + '人'
				}
			},
			// onBackPress(e) {
			// 	// return true 表示禁止默认返回
			// 	let pages = getCurrentPages();
			// 	let prevPage = pages[pages.length - 2];
			// 	prevPage.$vm.t = 'add-more'
			// 	prevPage.$vm.type = this.type
			// 	prevPage.$vm.setPers(this.perList);
			// 	return false
			// },
			closeUser(it, i) {
				this.perList.forEach(its => {
					if (its.userId == it.userId) {
						this.perList.splice(i, 1)
						if(this.isMust == 'true') {
							this.liTitle = this.perList.length + '人依次' + this.type.slice(0, this.type.length-1)
						} else {
							this.liTitle = this.type.slice(0, this.type.length-1) + this.perList.length + '人'
						}
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
		color: #333333;
	}

	.add-more-main {
		padding: 30rpx 20rpx;
	}

	.li-title {
		color: #a5a5a5;
		font-size: 30rpx;
	}

	.add-more-body {
		display: flex;
		flex-direction: row;
		justify-content: start;
		margin-top: 25rpx;
		padding: 0 28rpx;
		flex-wrap: wrap;
	}

	.pers-list {
		margin-right: 58rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.pers-pic {
		height: 70rpx;
	}

	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -78rpx;
		margin-left: 55rpx;

	}
	
	.per-close{
		flex-direction: column !important;
	}

	.pers-icon {
		position: relative;
		top: -50rpx;
		left: 88rpx;
		width: 26rpx;
	}

	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
	}

	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin-bottom: 40rpx;
		position: relative;
		height: 45rpx;
		border-radius: 15rpx;
	}

	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;

	}
</style>
